import styles from "./index.module.scss";
import React from "react";
import Icon from "@/components/icon";
import { SlideRef } from "@/shared/side";
import { useState } from "react";
interface Props {
  slideRef: React.RefObject<SlideRef | null>;
}

export default function UpdateUserChannel({ slideRef }: Props) {
  let [flag, setFlag] = useState(true);
  return (
    <div className={styles.container}>
      <div className={styles.close}>
        {/* <Icon
          type={"iconbtn_channel_close"}
          onClick={() => slideRef.current?.close()}
        /> */}
      </div>
      <div className={styles.title}>
        <h3>我的频道</h3>
        <h4>点击进入频道</h4>
        {/*<button>编辑</button>*/}
        <button
          className={flag ? styles.active : styles.activeColor}
          onClick={() => setFlag(!flag)}
        >
          {flag ? "完成" : "编辑"}
        </button>
      </div>
      <div className={styles.list}>
        <span className={styles.active}>推荐</span>
        <span>
          人工智能 <Icon type={"iconbtn_tag_close"} />
        </span>
        <span>数据分析</span>
        <span>后端</span>
        <span>前端</span>
        <span>测试</span>
        <span>数据库</span>
      </div>
      <div className={styles.space}></div>
      <div className={styles.title}>
        <h3>可选频道</h3>
      </div>
      <div className={styles.list}>
        <span>+ 人工智能</span>
        <span>+ 数据分析</span>
        <span>+ 后端</span>
        <span>+ 前端</span>
        <span>+ 测试</span>
        <span>+ 数据库</span>
      </div>
    </div>
  );
}
